<template>
  <div class="model-filter flex">
    <div class="search-wrapper">
      <div class="search-item">
        <div class="search-label">选择车型</div>
        <div class="search-content">
          <a-auto-complete
            allow-clear
            :triggerProps="{ 'popup-container': '.model-filter' }"
            v-model="form.modelKeyword"
            :data="modelAutoCompleteData"
            placeholder="请输入车型名称"
          />
        </div>
      </div>
      <div class="search-item site">
        <div class="search-label">选择门店</div>
        <div class="search-content">
          <a-auto-complete
            allow-clear
            :triggerProps="{ 'popup-container': '.model-filter' }"
            v-model="form.siteKeyword"
            :data="siteList"
            placeholder="请输入门店名称"
          />
        </div>
      </div>
    </div>
    <div class="query-btn">
      <a-button class="operate-button" type="primary" @click="searchFn">
        <template #icon><icon-search /></template>查询
      </a-button>
    </div>
  </div>
</template>
<script setup>
  import { reactive, computed } from 'vue'

  const props = defineProps({
    modelList: {
      type: Array,
      default: () => [],
    },
    siteList: {
      type: Array,
      default: () => [],
    },
  })

  const form = reactive({
    modelKeyword: '', // 车型名称
    siteKeyword: '', // 门店名称
  })

  // 车型名称数据源
  const modelAutoCompleteData = computed(() => {
    const modelList = props.modelList
    return modelList.map((item) => item.label)
  })

  const emits = defineEmits(['search'])

  const searchFn = () => {
    emits('search', { ...form })
  }
</script>
<style lang="less" scoped>
  .model-filter {
    display: flex;
    flex-wrap: wrap;
    .search-wrapper {
      display: flex;
      flex-wrap: wrap;
      .search-item {
        display: flex;
        margin-right: 9px;
        .search-label {
          width: 56px;
          height: 32px;
          line-height: 32px;
          font-size: 14px;
          color: #4e5969;
          margin-right: 9px;
        }
        .search-content {
          width: 340px;
        }
      }
      .search-item.site {
        margin-right: 20px;
      }
    }
    .query-btn {
      width: 84px;
    }
  }
  @media screen and (max-width: 1440px) {
    .search-content {
      width: 220px !important;
    }
  }
  @media screen and (max-width: 1100px) {
    .search-content {
      width: 160px !important;
    }
  }
  @media screen and (max-width: 900px) {
    .search-item {
      .search-content {
        width: 200px !important;
      }
      margin-bottom: 9px !important;
    }
  }
</style>
